Element-UI 表单验证规则rules，配置参数说明

先来看以下这段代码。这里el-form表单，表单验证rules。

实现效果：

<el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="top" label-width="auto">　<el-form-item label="手机号" prop="phone">
    #省略代码　</el-form-item>
  <el-form-item label="邮箱" prop="email">　　#省略代码
　</el-form-item>
  #省略代码</el-form>

rules配置参数说明

1、required 是否必填

可选，true、false。当开启时，表单字段为必填，左侧样式红色*号标记。

例如：

rules: {
    phone: [
      { required: true, message: '手机必须填写', trigger: 'change' }
    ]
}

2、message 验证不通过告警文字

3、trigger 触发方式

可选，blur：失去焦点；change： 值变更

4、min、max 最小值，最大值

type默认为string，min和max则为最小长度和最大长度。

type为number，min和max则为最小值和最大值。

PS：type为number时，需要在绑定时写 v-model.number='age'，但input的type 不能设置为number，否则获取的值会一直被视为是字符串。

如：

rules: {
   login_name: [
      { required: true, message: '账号必须填写', trigger: 'change' },
      { required: true, min: 5, max: 32, message: '长度在 5 到 32 个字符', trigger: 'blur' }
   ]}

5、type，默认string

可选，string、number、date、datetime 等等。

如：

{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }

6、pattern 正则匹配

使用正则表达式验证数据。

例子：正则验证手机号码和邮箱，对应开头。

rules: {
   phone: [{
      pattern: /^1[3-9]\d{9}$/,
      message: '手机号格式错误',
      trigger: 'blur'
   }],
   email: [{
      pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,8})$/,
      message: '邮箱格式错误',
      trigger: 'blur'
   }]
}

7、validator 自定义检查方法

参数 rule, value, callback。

检测成功或不成功都需要手动调用callback , 验证不成功时 callback(new Error('提示信息')) 。

注意：当在下面的对象中有message时则验证失败只会显示message的值。

例子：

rules: {
   password: [{
      required: true,
      validator: (rule, value, callback) => {　　　　 if (!value) {
           callback(new Error('新密码不能为空'))
         } else if (value !== this.passwordData.con_password) {
           callback(new Error('两次密码不一致'))
         } else {
           callback()
         }
      },
      trigger: 'blur'
   }],
   con_password: [{
      required: true,
      validator: (rule, value, callback) => {
　　　　 if (!value) {
           callback(new Error('新密码不能为空'))
         } else if (value !== this.passwordData.password) {
           callback(new Error('两次密码不一致'))
         } else {
           callback()
         }
      },
      trigger: 'blur'
   }]
}

当然也可以写成：

rules: {
   password: [{
      required: true,
      validator: this.passwordValidator,
      trigger: 'blur'
   }],
   con_password: [{
      required: true,
      validator: this.conPasswordValidator,
      trigger: 'blur'
   }]
}
... 省略代码, method里面写passwordValidator(rule, value, callback) {
  if (!value) {
    callback(new Error('新密码不能为空'))
  } else if (value !== this.passwordData.con_password) {
    callback(new Error('两次密码不一致'))
  } else {
    callback()
  }
},
conPasswordValidator(rule, value, callback) {
  if (!value) {
    callback(new Error('确认密码不能为空'))
  } else if (value !== this.passwordData.password) {
    callback(new Error('两次密码不一致'))
  } else {
    callback()
  }
},
... 省略代码